homepage6047 Top Page 2018年 8月

真夏なのに桜吹雪

（操作　p:ワイヤフレーム、o:背景、q,a:焦点距離、w,s:X軸回転、e,d:Y軸回転、r,f:Z軸回転、t,g:幅、y,h:高さ、i,j,k,m:位置、z:画質、space:コマ送り（STOP時））

2018/8/25（土）

「日経パソコン編　小中学生からはじめる　プログラミングの本　2018年版」（1200円）のP86に、

プログラミングの授業といっても、子どもたちはコンピュータとにらめっこしながら、一人の世界にこもってプログラミングの知識や技能を身につけるのではありません。むしろ、アイデアを作品にしたり、モノを動かすなどの実体験を積み重ねながら、協力して課題を解決したり、創造性を養う活動に重きが置かれています。ゆえに、プログラミング教育はプログラミング言語を覚えるものではない、と新学習指導要領には明記されています。

と書かれていました。

これまで、国は技術だけに注目している、と私は勝手に思っていましたが、ちゃんと、技術とコミュニケーションの両方が重要と言っているわけです。

小中学生、高校生にいろいろ教えようと考えている私にとっては、こういう情報を得ることができただけでも、この本を買った意義があります。

子供に教えるんじゃなくて、子供から教わるほうかもしれないな、最近は進んでいるようだから…

---

この記事がおかしくてたまりませんでした。

https://rocketnews24.com/2018/08/18/1103794/

中国製の格安スマートウォッチ購入の話。

基本的には中国側は親切心にあふれた対応をしているんですが、おかしな日本語とそれに対する記者の反応が面白かった。

2018/8/22（水）

映画「ジュマンジ（ウェルカムトゥジャングル）」（2017年／アメリカ／1時間59分）★★★★★

吹き替えで観ました。たくさん笑えました。

地図学者役のジャック・ブラック（俳優）がぴったりの はまり役で面白かったです。

あと美女役の人のアクションがカッコよかった！

2018/8/18（土）　お盆休み

今月のトップページの JavaScript は「桜吹雪」

真夏で、夕焼けで、桜吹雪なので、だいぶミスマッチしています。

夕焼けはプログラムを作っているときに窓から見えた夕焼けを見ながら色を選んだので、本物っぽい夕焼けになっています。

ビルのシルエットは高さと幅を乱数で決めています。

キーボードの o キーを押すと「夕焼け」「夜桜」「無地」「青空と草原」の４種類を切り替えます。

いつものことですが、3DCGの原理の計算式 h = x * ( s / z ), v = y * ( s / z ) で3D計算を行っています。

プログラムリスト

自然の桜吹雪らしく見せるためにいろいろ工夫をしました。１つ１つの工夫の有無で どう違うのか わかるようにしてあるので違いを見ていきましょう。

花びらを100個くらい、x, y, z それぞれランダムに配置して、それぞれを上記のとおり単純に回転させると以下のような動きになります。

There is no canvas.

全ての花びらが同じ方向を向いたまま回っています。

花びら１つ１つには自転してほしいですよね。

自転させてみましょう。

There is no canvas.

これなら桜吹雪と言っても良いでしょう。

でも現在、正六面体状に、花びらを配置しています。

これを円筒形にしてみましょう。

▲サイコロ状に配置していた花びらを、円筒形状に配置するよう、変更する

There is no canvas.

前の動きと比べてみると、違いがほとんど感じられません。

しかし、花びらの数を2000枚に増やすと、どのように配置するかで以下のように違いが出てきます。

ただ実際は、2000枚の設定でプログラムを使うことはなく、100枚で足りているので、正六面体状に配置する方法で問題ない（どの形状に配置しても同じなら計算が単純なほうが良い）と思います。

それに、桜吹雪なので、回転の角度によってムラが出たり出なかったりしているほうが、波があって自然かもしれません。（上図の右端が良いかも）

※以降の説明では、「円筒形」（上図左から２番目）で説明をしており、途中で「円筒くりぬき」（上図左から３番目）になります。そして最後に「正六面体くりぬき」（上図右端）を行っています。このページの最初の夕焼けは「正六面体くりぬき」です。

つまり円筒形状に配置するのは、桜吹雪を良く見せるための工夫としては、あまり意味がなく、無駄足でした。しかし無駄足も成功のためのステップであり、ためになります。

次は、花びらが時々一本の線になっているときがあります。

▲花びらが一本の線になる瞬間がある。それが花びららしくない。

これが結構、花びらっぽくないので直しましょう。直しましょうと言ってもちょっと難しいです。

面が向いている向き（下図赤線）と、視線の方向（下図青線）との角度を求め、それが直角に近い時は、上図の「線に見える状態」なので、そのときは角度を別の角度にリセットします。難しく言うと、面の法線と視線方向との内積を得る、という高校数学の話です。

大事なことですが私は「内積って何？」と聞かれたら何も答えられません。べつに内積を知らなくても、内積を使うことはできるんです（内積の公式のとおりに計算すれば、ほしい結果が得られる）。そのプログラムを作るためにすべてを知っている必要はなく（すべてを勉強・習得する必要はなく）、とりあえずそのプログラムを実現するために必要な方法を導入するんです。理解するとしたら後から理解すれば良いでしょう。だってとりあえず動かしたいでしょ。

▲花びらの角度を検出する。（いくらか3D計算の経験が必要になる。3D計算の経験は「3DCGの原理の式」だけでも積むことが可能）

There is no canvas.

よく見ていると、線になりそうになると、パッと角度が変わるでしょう？

次は迫力を出すために円筒形を少し傾けます。

▲円筒形を斜めに傾けてみる

There is no canvas.

ちょっとかっこよくなったような？

よく見ると画面の右上のほう（赤く塗った部分）で、「とどまったまま、同じ場所で自転だけしている花びら」がないでしょうか？

ランダムに配置したので場合によっては見当たらないかもしれませんが、ページ更新したりして再描画させるとみつかるかもしれません。

対策としては、筒形状を ちくわ形状にします。

▲円筒形をちくわ状にすれば、「中央で自転だけしている花びら」をなくせるだろう

There is no canvas.

これで納得！　でももっとひとくせ入れます。

アニメ「超時空要塞マクロス」のあの弾道に煙を残しながら規則正しく進む大量のミサイルなんですが、あれはすべてが規則正しく進むのではなく、たとえば１０個のミサイルの内、１個は別ルートを取っているそうです。そうすることで、複雑な印象、リアルな印象、、確かそんなことだったと思いますが、そういうものを与える効果があるそうです。

ちくわを２つにして、いっぽうは花びらの数を20%に少なくして、ちくわの傾きも20%増やし、花びらの色を少し濃い目にしてみます。

There is no canvas.

どうです？　なかなかリアルでしょう？

しかし、もうちょっとがんばって、前述の赤文字で

＞それに、桜吹雪なので、回転の角度によってムラが出たり出なかったりしているほうが、波があって自然かもしれません。（上図の右端が良いかも）

と書いていたことを実行しましょう。

「円筒くりぬき状」で配置していた花びらを、「正六面体くりぬき状」で配置する方法に変更します。

There is no canvas.

まぁ、ときどき桜の花びらの量にムラが出てくれるとありがたいのですが、なにぶん、花びらの量が少ないので違いはわからないかもしれませんね…。

Wikipediaに「花吹雪」の動画があるので比べてみてください。https://ja.wikipedia.org/wiki/花吹雪

以上のとおり、たくさんの工夫のうえで成り立っています、というお話でした。

2018/8/16（木）　お盆休み

実家に帰ってきました。

自宅最寄り駅→（特急電車）→東京駅→（総武線快速）→木更津方面

という道のりでずっと座っていましたが、ヘトヘトになりました。

思えばいろいろありました。

特急電車では、Uターンラッシュで満員でしたが、私が座った席の はす向かいの席で、

「そこは私の予約の席です」「いや私の予約の席です」

という押し問答が始まりました。

切符を見比べたり、「切符の発行時刻がどっちが先だからどっちが有効」だとか？

もともと座っていた人が立って、後から来た人が座っちゃったりしていましたが、どっちも自分が正しいと思っているようで、緊張感がただよっていました。駅員呼んだほうがいいような？私も周りの人もその様子にくぎづけ。

でも結局は後から来たオジサンが電車自体（特急電車番号）を間違っていたらしく、その場は収まりました。

私の席の隣に座っていたお兄さんが「ンなわけないんですよねぇ」と私にささやき、私は「ははは…」と はにかみ笑い。

次に東京駅では、これから総武線快速に乗ろう、あと5分というときに、自分の異常事態に気づきました。

東京駅までの特急電車の乗車券・特急券は持っている。でも東京駅以降の切符は持っていなくて乗り越し精算しようと思っている。しかし財布にお金がない。クレジットカードとキャッシュカードは持ってる…。この状態で目的の駅まで行ってしまうと、乗り越し精算（足らない分の支払い）はできないんじゃ？

急いで「電車　精算　クレジットカード」でWEB検索したら、「目的の駅でお金がないことに気づいて駅員に事情を話して特別にクレジットカードで清算してもらいました」という話がありました。（乗り越し精算機はクレジットに対応していない？）

同じことをやるにも自分はその人と違って事前に気づいていて、その状態で目的地の駅で駅員にお願いしても迷惑をかけそうだし、目的地の駅で家族を呼ぶのもいまいちだし…、WEBの話の最後に「ちゃんとお金用意しておけよって話ですよね」という言葉もあったしで、発車まであと3分くらいでしたが判断して、目の前の快速はあきらめました。

ホームの並びの列に背中を向けて駅のATMへ行ってちゃんとお金をおろして、1時間後の総武線快速に乗りました。

お次は、目的地の駅に降り立つと、なんだ？この人ごみは？浴衣なんか着てたりして…、8/15は木更津の花火大会だっけ…その帰りの人たちかな？　なんか落ち着かないな。

そんなこんなで、ずっと座っていたのにヘトヘトになって実家に着きました。仕事で疲れているっていうのもあるけど、お盆の後半に帰省するとか、自分は無計画すぎるんだよな…。

2018/8/14（火）　お盆休み

2018/8/12（日）

エッジ検出（図形など）のプログラム

2018/8/5（日）

RPGの下地プログラム試作

いろいろと細かいところまでしゃべってしまう性格なので、今回もまた下記のようにいろいろ書いているんですが、どんなに価値ある良いことを書いていたって、こんな長文を見たら、多くの人は読もうとは思わないでしょう。私の性格…「わいた疑問をほっとけない」っていうのかな。このへん直したほうが良いんでしょうね。

RPGを自分で作る際の下地になるような自作のプログラムを紹介します。

まだ試作段階のものです。

プログラミング言語でゲームを作る際は　delay()　とか　vsync　のような一定時間待つ関数がなければ、ゲーム画面のアニメーションは難しいと思います。なぜなら、アニメのコマを次々と変える際、コンピューターの高速な処理ではすべてのコマを一瞬で表示してしまい、人間の目にはアニメとして見えないからです。人間の目にもわかるようにコマ同士を一定時間、間を置いて表示する必要があります。

JavaScriptは　setInterval()　という関数があるのでその実現は可能です。setInterval() は一定時間ごとに指定の関数を呼びます。

今回のプログラムは、JavaScript の記述を JavaScript で読み実行します。

JavaScript は関数名に対し、たとえば test() という関数なら、test.toString() でその内容を手軽に取得できます。

取得したら1行ずつ取り出して eval() に渡して実行することが可能なんです。（eval は evaluate の略で意味は「評価」です。渡された文字列を JavaScript として評価（実行）するという関数です）

その際ちょっと特殊なことを行います。

• //anm100　という行末コメントがあれば、その行を実行後 100ms プログラムを止めます。
• //suspend　という行末コメントがあれば、その行を実行後プログラムを停止し、resume()　が実行されたらプログラムを再開します。
• //stepin　という行末コメントがあれば、その行が関数の呼び出しだった場合は、その関数の中へ入り、関数内の行のコメントを同様に処理します。

行に対しこのような 時間に関する制御 を行うことで、JavaScript のプログラムがそのままアニメの命令になるので、便利になります。

JavaScript を読み込んで1行1行実行する際の壁となるような「難しいこと」を挙げておきます。

• プログラムは {} によるブロック構造になっているので、それを認知しなければならない。
• 条件分岐、繰り返しなどの制御構造を自分で処理しなければならない。
  単に eval( "while(..) {..}" ) として動作はしますが、{..}のブロック内に自分なりの特殊な処理（//anm100など）を実装したい場合を考えると、「制御を自分で処理」という答えになると思います。
• 変数のスコープを考えると大変です。
  スコープとは、”ある変数名や関数名といった名前を参照できる範囲のこと” です。（Wikipediaより）
  var a;で変数がそのブロック内で有効になりますが、これは、env.a = null; のように置き換えて、ブロックごとに用意した「環境」のオブジェクトにメンバを用意する…ということになります。（自分はそうしました）
• いろいろありますが、こういうのも大変です。これは時間をかけてトライしましたが、単純で明快なアルゴリズムが見つからず あきらめました。
  
  
  a = b( f() ) + c * ( d + e() );
  
  これも eval() に渡せば簡単ですが一気に処理されてしまいます。関数の中で //anm を使いたい場合は　eval()　に渡さず、自分で処理することになります。四則演算などの演算子や計算式中の () による優先順位の変化が からんでいます。
  これは情報の資格試験に出てくる構文解析なので、字句解析などからやってみましたが…。どうやればいいのか。
  そこで以下のような妥協案を採用しました。
  
  
  g = e(); //stepin
  h = f(); //stepin
  a = b( h ) + c * ( d + g );
  
  e() と f() を特にアニメとして処理したい場合は、別の行で　//stepin　というコメント付きで実行します。
  これなら、必要に応じてアニメ化ができるので大きな問題はないでしょう。
  でも　a = b( f() ) + c * ( d + e() );　が必要なアニメってどんなアニメなのか想像できない…。
  なお、上記の　a =..　の行は eval() に渡されます。

現状で、

• ファミコン版ドラクエ１の戦闘画面開始のシーケンスと同等なアニメの実現が可能　（//anm を使用）
• SVC（Side View Character）のposeの変更が可能　（//suspendを使用）

なので、次回あたりでそれらの試作を行いたいと思います。（その前にプログラムの整頓を行います）

---

映画「プリンス・オブ・ペルシャ(字幕)」（2010年／アメリカ／116分）★★★☆☆

ペットボトル緑茶「綾鷹」のキャンペーンでラベルの裏のアタリで観せてもらいました。

冒頭からいきなりゲーム画面さながらのジャンプジャンプを見せつけてきます。できれば、そういう大衆受けする方針を取るのではなく、物語の序盤はその特徴を伏せておいて、序盤が終わるころにさりげなく「これだ！」という感じでジャンプを見せてくれるやり方がいいなと思いました。

全体的に出来が良いんだけど、音楽に例えると「低音と高音を強調しすぎてその迫力に視聴者が疲れる」という感じがしました。2時間という再生時間が長く感じて、面白いかもしれないけど早く終わってほしい気もする…と思いながら観ていました。私が歳だからでしょうか。

スタッフロールにジョーダン・メクナーの名が並んでいた時は、PC-9801のゲームのタイトル画面でよく見ていた名前だと思いました。ジャンプの途中で画面切り替えしても全然苦にならないというすばらしいゲーム構成を思い出しました。

アクションやキャラクターがゲーム画面を思い起こさせ、その辺の巧みな映画製作の技術が★を４に？と思わせますが、名作には思えないので辛口で★３です。